<template>
  <div ref="echartBar"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import axios from 'axios';
// import ChartLhz from "@/components/ChartLhz.vue";
const echartBar = ref(null);
let options = ref([]);

function chartBartInit() {
  const myChart = echarts.init(echartBar.value,"dark",{
    width: 480,height: 400,
  });

  const xAxisData = options.value.map(item => item.gpa);
  const seriesData = options.value.map(item => item.num);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    title: {
      text: '绩点分布图',
      left: 'center',
      top: 20,
      textStyle: { color: '#FF6060' }
    },
    legend: {
      data: ['人数']
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      right: 30 // 将图表向左移动，这里设置为容器宽度的10%
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        data: seriesData
      }
    ]
  };

  myChart.setOption(option);
}

function getData() {
  axios.get('/stu-api/queryAllgpa')
      .then(response => {
        console.log(response)
        options.value = response.data.data;
        chartBartInit();

      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
}

onMounted(() => {
  getData();
});
</script>

<style scoped>
.chart-container {

}
</style>
